<template>
	<div>
		<div 
		ref="hcj_submenu"
		:style="{'color': setTextColor}"
		class="hcj-submenu" :class="{
		'hcj-submenu-h': mode == 'horizontal' ? true : false,
		'hcj-submenu-v': mode == 'vertical' ? true : false
		}"
		@click="setChildStyle()"
		@mouseenter="handleMouseEnter()"
		 @mouseleave="handleMouseLeave()">
			<slot name="title"></slot> 
			<span ref="icon_indicate" class="hcj-close_icon">
				
			</span>
		</div>
		<div 
		class="hcj-submenu-child" 
		 :class="{
			 'hcj-submenu-child-h': mode == 'horizontal' ? true : false,
		 }"
		 ref="hcj_submenu_child"
		 @mouseenter="handleMouseEnter()"
		  @mouseleave="handleMouseLeave()">
			<slot></slot>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'hcj-submenu',
		data() {
			return {
				mode: this.$parent.childMode,
				childMode: this.$parent.childMode, //该组件需要再次加载menu-item组件，menu-item需再次从父组件中请求模式。
				submenuItem: true,
				childMenuShow: false ,//子导航默认关闭
				menuHeight: 0, //子导航
				setBgColor: this.$parent.bgColor,
				setTextColor: this.$parent.textColor,
				setMouseColor: this.$parent.setMouseColor
			}
		},
		mounted() {
			this.getNavHeight();
			this.setMenuStyle();
		},
		methods: {
			callClick() {
				this.$emit('click');
			},
			getNavHeight() {
				// 获取子菜单高度
				this.$refs.hcj_submenu_child.style.height = 'auto';
				this.menuHeight = this.$refs.hcj_submenu_child.offsetHeight;
				this.$nextTick(() => {
					this.$refs.hcj_submenu_child.style.height = '0';
				})
				//
			},
			setMenuStyle() {
				if(this.mode == "vertical") {
					this.$refs.hcj_submenu.style.backgroundColor = this.setBgColor;
				} else if(this.mode == "horizontal") {
					this.$refs.hcj_submenu_child.style.backgroundColor = this.setBgColor;
				}
			},
			handleMouseEnter() {
				if(this.mode == 'horizontal') {
					this.$refs.hcj_submenu_child.style.height = this.menuHeight + 'px';
					this.$refs.icon_indicate.classList.add('hcj-close_icon-hover')
				}
			},
			handleMouseLeave() {
				if(this.mode == 'horizontal') {
					this.$refs.hcj_submenu_child.style.height = '0';
					this.$refs.icon_indicate.classList.remove('hcj-close_icon-hover')
				}
			},
			setChildStyle() {
				if(this.childMenuShow == false) {
					this.$refs.hcj_submenu_child.style.height = this.menuHeight + 'px';
					this.$refs.icon_indicate.classList.add('hcj-close_icon-hover')
					this.childMenuShow = true
				} else {
					this.$refs.hcj_submenu_child.style.height = '0';
					this.$refs.icon_indicate.classList.remove('hcj-close_icon-hover')
					this.childMenuShow = false
				}
			}
		}
	}
</script>

<style scoped>
	.hcj-submenu {
		position: relative;
		display: block;
		margin-left: 10px;
		user-select: none;
		cursor: pointer;
		padding: 10px;
		width: auto;
		padding-right: 30px;
		padding-left: 10px;
		overflow: hidden;
		font-size: 14px;
		font-weight: 550;
		/* background-color: pink; */
	}
	.hcj-submenu-v {
		padding: 17px 10px;
		font-size: 15px;
	}

	.hcj-submenu-v:hover {
		background-color: #ecf5ff;
	}
	.hcj-submenu-h {
		text-align: center;
	}

	.hcj-submenu-h:hover {
		/* border-bottom: 3px solid #00aaff; */
		color: #3d3d3d;
	}

	.hcj-submenu-child {
		height: 0;
		text-indent: 1em;
		font-weight: 100;
		overflow: hidden;
		transition: all 0.3s;
	}
	.hcj-submenu-child-h {
		margin-top: 10px;
		background-color: white;
		box-shadow: 0px 0px 5px #cccccc;
		text-indent: 0em;
	}
	.hcj-close_icon {
		position: absolute;
		right: 15px;
		top: 36%;
		transform: rotate(45deg);
		display: inline-block;
		width: 6px;
		height: 6px;
		background-color: transparent;
		/* background-image: linear-gradient(to left top,#5b5b5b,transparent,transparent); */
		border-bottom: 1px solid #5b5b5b;
		border-right: 1px solid #5b5b5b;
		transition: all 0.2s;
	}
	.hcj-close_icon-hover {
		transform: rotate(-135deg);
		top: 45%;
	}
</style>